<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/scrollBar.css">

    <title>交大「江湖令」</title>

    <style>
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            color: rgb(198, 202, 206)
        }
        
        #app {
            width: 100%;
            height: 100%;
            /*定义为一个flex盒子*/
            display: flex;
            /*内部元素按行排列*/
            flex-direction: row;
            min-width: 700px;
            min-height: 700px;
        }
        
        .nav {
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
            transition: width 0.3s;
            background-color: rgb(0, 21, 41);
            font-size: 14px;
        }
        
        .main {
            /*自动扩展占位*/
            flex: auto;
            display: flex;
            flex-direction: column;
            width: 180px;
        }
        
        .title {
            width: 100%;
            height: 60px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
            position: relative;
        }
        
        .currUser {
            position: absolute;
            right: 20px;
            bottom: 5px;
            display: flex;
            /* 主轴为水平方向 */
            flex-direction: row;
            /*交叉轴居中对齐*/
            align-items: center;
        }
        
        .main_content {
            width: 100%;
            flex: auto;
            background-color: rgb(244, 244, 244);
            padding: 16px 24px 0px;
            overflow: hidden;
        }
        
        .bottom {
            width: 100%;
            height: 30px;
            text-align: center;
            background-color: rgb(240, 242, 245);
        }
        
        .main-menu {
            height: 35px;
            cursor: pointer;
            padding: 5px 0px 5px 15px;
            color: rgba(198, 202, 206, 0.8)
        }

        .main-menu:hover{/*鼠标悬浮时的样式*/
            color: black;
            background-color: #95999c;
        }
        
        .sub-menu {
            border: none;
            background-color: rgb(0, 12, 23);
            color: rgba(198, 202, 206, 0.8)
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border: 0px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav" :style="{width:navWidth+'px'}">
            <!-- logo -->
            <div style="box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;">
                <p style="text-align:center;line-height:50px;width:180px">西安交通大学</p>
            </div>

            <!-- 导航菜单 -->
            <div class="accordion" id="accordionExample">
                <div style="margin-top:10px;width:180px">
                    <div class="main-menu">
                        <a href="view/test.html" target="content" style="color: rgba(198, 202, 206, 0.8);text-decoration: none;">
                        <div>
                            首页
                        </div>
                        </a>
                    </div>
                </div>

                <div style="margin-top:10px;width:180px ">
                    <div class="main-menu" data-toggle="collapse" data-target="#two" id="headingOne1">
                        交易市场
                    </div>
                    <div class="list-group collapse" id="two" data-parent="#accordionExample">
                        <a href="view/addDemand.html" target="content" class="list-group-item list-group-item-action sub-menu ">添加求物</a>
                        <a href="view/demand.html" target="content" class="list-group-item list-group-item-action sub-menu ">需求市场</a>
                        <!-- <a href="addItem.html" target="content" class="list-group-item list-group-item-action sub-menu ">添加商品</a> -->
                        <a href="view/item.html" target="content" class="list-group-item list-group-item-action sub-menu ">商品浏览</a>
                        <a href="view/selfDemands.html" target="content" class="list-group-item list-group-item-action sub-menu ">我的需求</a>
                        <a href="view/manageItem.html" target="content" class="list-group-item list-group-item-action sub-menu ">我的商品</a>
                    </div>
                </div>
                <div style="margin-top:10px;width:180px ">
                    <div class="main-menu" data-toggle="collapse" data-target="#three" id="headingOne2">
                        招领寻物
                    </div>
                    <div class="list-group collapse" id="three" data-parent="#accordionExample">
                        <a href="view/lost.html" target="content" class="list-group-item list-group-item-action sub-menu">寻物启示</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <!-- 标题 -->
            <div class="title">
                <i @click="switchNavWidth" class="fa fa-bars fa-2x " style="color:#CCCCCC;margin:5px 0px 0px 10px;cursor: pointer;"></i>

                <div class="currUser my-auto mr-5">
                    <a v-if = "currentUser.is_admin" href="view/control/mainShow.html" class="btn btn-primary my-auto">控制台</a>
                    <img src="view/control/assest/images/small_logo.png" alt="" style="height:50px;width:70px;margin-right:20px;border-radius: 50%;" @click="openUploadWin">
                    <div class="dropdown" style="margin-left:20px;">
                        <div class="dropdown-toggle my-auto" data-toggle="dropdown">
                           {{currentUser.u_name}}
                        </div>
                        <div class="dropdown-menu" style="margin-top:13px;margin-right:30px">

                            <a class="dropdown-item" href="./view/changepwd.html">修改密码</a>
                            <a class="dropdown-item" href="./index.html">退出</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="main_content">
                <iframe src="view/test.html" name="content"></iframe>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                交大「江湖令」 ©2021 Created by Xjtuer
            </div>

            <div id="upload-avatar" style="display: none;padding:10px;">
                <div @click="chooseAvatar" >
                    <div v-if="currentFile" style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                        <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;"/>
                    </div>

                    <div v-else style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;border:1px dashed #AAAAAA;">
                        <i class="fa fa-plus fa-3x" style="color:#AAAAAA;"></i>
                        <div style="font-size:26px;">上传头像</div>
                    </div>
                </div>

                <button :disabled="currentFile==null" class="btn btn-primary btn-lg" style="width:100%;margin-top:10px;" @click="uploadAvatar" >上传头像</button>
            </div>
            <input v-show="false" type="file" ref="fileInput" @change="handleFile" />
        </div>
    </div>

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        const app = {
            data() {
                return {
                    navWidth: 180,
                    currentUser: {
                        u_id:''
                    },

                    currentFile:null,//当前图片文件
                    currentImgUrl:null,//当前图片路径
                }
            },
            methods: {
                switchNavWidth() {
                    this.navWidth = this.navWidth == 180 ? 0 : 180
                },

                getCurrentUser(){
                    this.currentUser.u_id =  sessionStorage.getItem("u_id");
                    console.log(this.currentUser);
                    myAxios.post('/getUserdetail',this.currentUser)
                    .then(res =>{
                        this.currentUser = res.data.data;
                    })
                },

                //打开上传的弹框
                openUploadWin(){
                    layer.open({
                        type:1,
                        title:false,
                        content:$('#upload-avatar')
                    });
                },

                //选择头像
                chooseAvatar(){
                    this.$refs.fileInput.click();//通过程序点击文件框
                },

                //选择图片文件后处理图片文件
                handleFile(){
                    this.currentFile = this.$refs.fileInput.files[0];//获得选中的图片文件

                    let fileReader = new FileReader();
                    fileReader.onload = ()=>{//读取文件完成事件
                        this.currentImgUrl = fileReader.result;//将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                    };
                    fileReader.readAsDataURL(this.currentFile);//读取文件并转化为url
                },

                //上传头像
                uploadAvatar(){
                    let idx = layer.load();
                    let formData = new FormData();
                    formData.append("avatar",this.currentFile);//"avatar"是参数名

                    myAxios.post("/avatar",formData).then(res=>{
                        layer.close(idx);
                        if(res.data.success){
                            this.getCurrentUser();
                            layer.msg('上传成功！', {icon: 1});
                            this.currentFile = null;
                            this.currentImgUrl  = null;
                        }else{
                            layer.msg(res.data.message, {icon: 2});
                        }
                    }).catch(err=>{
                        layer.close(idx);
                    })
                }
            },
            mounted() {
                this.getCurrentUser();
            }
        };
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>